let layer=layui.layer





// 1.1 获取裁剪区域的 DOM 元素
let $image = $(".container img");

// 1.2 配置选项
let options = {
    // 纵横比
    aspectRatio: 1,
    preview: ".preview",
};

// 1.3 创建裁剪区域
$image.cropper(options);


$('#btnChooseImage').on('click',function(){
  $('#file').click()
})
$('#file').on('change',function(){
  const file=this.files[0]
  console.log(file);
  if(!file){
    return layer.msg('请上传文件')
  }
  const newSrc = URL.createObjectURL(file)
  console.log(newSrc);
  $image
   .cropper('destroy')      // 销毁旧的裁剪区域
   .attr('src', newSrc)  // 重新设置图片路径
   .cropper(options)        // 重新初始化裁剪区域

})
$('#btnCreateAvatar').on('click', function () {
  // 3. 获取到用户选择的文件列表


let base64Str = $image.cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
  width: 100,
  height: 100
});

// 把图片转成base64格式
let dataURL = base64Str.toDataURL('image/png'); // 把canvas图片转成base64格式的字符串
console.log(dataURL);
// 对图片进行编码处理，不然有问题
axios.post('/my/update/avatar',`avatar=${encodeURIComponent(dataURL)}`)
.then(({data:{status}}) => {
 
  if (status !== 0) {
    // 失败
    return layer.msg("更新头像失败");
}
  layer.msg("更新头像成功");

  window.parent.getAllinfo()
})

})



